<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <!--    引入vue 路由-->
    <script src="../vue/vue-router.js"></script>
</head>
<body>
<!--
   插槽 :  在组件模板中预留的一个扩展接口  让组件使用更加灵活
   使用组件标签时 可以在组件标签内编写需要再插槽中渲染的内容


   1. 默认插槽    组件中只有一个插槽    组件标签中编写的内容全部是默认插槽的内容
-->
<div id="app">
<!--    组件标签   包含了插槽 -->
   <temp>
       <button>普通按钮</button>
       <a href="https://www.baidu.com">baidu</a>
   </temp>
</div>

<script>


    let  temp = {
        template:`
            <div>
                <slot></slot>
            </div>
        `,
    }


    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            temp
        }
      })
</script>
</body>
</html>
